<div th:fragment="html">
    <div id="fundMainDiv">
        <table class="inputTable ">
            <tr>
                <td width="25%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金代码:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="fundMain.code">
                </td>
                <td width="4%"></td>
                <td width="6%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金名称:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="fundMain.fundname">
                </td>
                <td width="25%"></td>
            </tr>
            <tr>
                <td width="25%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金类型:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="fundMain.fundtype">
                </td>
                <td width="4%"></td>
                <td width="6%" align="right">
                    <span data-toggle="tooltip" data-placement="top">手续费:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="fundMain.commissionRate">
                </td>
                <td width="25%"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-success" @click="queryFundMain(1)">查询</button>
                </td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFundMain">新增
                    </button>
                </td>
            </tr>
        </table>

        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="5">基金代码及名称</th>
            <th>同步</th>
            </thead>
            <tbody>
            <tr>
                <td width="10%">ID</td>
                <td width="20%">基金代码</td>
                <td width="25%">基金名称</td>
                <td width="15%">基金类型</td>
                <td width="10%">手续费率(%)</td>
                <td width="20%">
                    <button type="button" class="btn btn-primary" @click="allDateSynchro">全部增量</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" @click="allDateSynchros">全部全量</button>
                </td>
            </tr>
            <tr v-for="bean in fundMains">
                <td>{{bean.id}}</td>
                <td>{{bean.code}}</td>
                <td>{{bean.fundname}}</td>
                <td>{{bean.fundtype}}</td>
                <td>{{bean.commissionRate}}</td>
                <td>
                    <button type="button" class="btn btn-success" @click="synchro(bean.code)">增量</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-success" @click="synchros(bean.code)">全量</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="modal fade" id="addFundMain" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 450px;">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">新增基金</h4>
                    </div>

                    <div>
                        <table class="addTab inputTable">
                            <tr>
                                <td align="right">基金代码:</td>
                                <td><input type="text" class="form-control" v-model="addFund.code"></td>
                            </tr>
                            <tr>
                                <td align="right">手续费率:</td>
                                <td><input type="text" class="form-control" v-model="addFund.commissionRate"></td>
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="addMain" type="button">新增</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!--    分页-->
        <div style="text-align:center;">
            <div th:replace="include/page::html"></div>
        </div>

    </div>
    <script>
        $(function () {
            var fundMainVue = {
                fundMain:{},
                fundMains: [],
                pagination: {},
                addFund: {code:'',commissionRate:''},
            };
            var vue = new Vue({
                el: '#fundMainDiv',
                data: fundMainVue,
                mounted: function () {
                    this.$nextTick(function () {
                        this.queryFundMain(1);
                    });
                },
                methods: {
                    queryFundMain: function (start) {
                        if(undefined==vue.pagination.size)
                            vue.pagination.size=5;

                        var url = "/fundmains/list/" + vue.pagination.size + "/" + start;
                        axios.post(url,vue.fundMain).then(function (response) {
                            vue.pagination = response.data.pagination;
                            vue.fundMains = vue.pagination.records;
                        });
                    },
                    ChangePageSize: function () {
                        vue.queryfundData(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page && !vue.pagination.isfirst)
                            vue.queryfundData(1);
                        else if('pre'== page && !vue.pagination.isfirst)
                            vue.queryfundData(vue.pagination.current-1);
                        else if('next'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.current+1);
                        else if('last'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        if(vue.pagination.current != start){
                            vue.queryfundData(start);
                        }
                    },

                    synchro: function (code) {
                        var url = "/funddatas/synchro/" + code;
                        vue.getSynchro(url);
                    },
                    synchros: function (code) {
                        var url = "/funddatas/synchroAll/" + code;
                        vue.getSynchro(url);
                    },
                    getSynchro:function(url){
                        axios.get(url).then(function (response) {
                            alert(response.data.msg);
                        });
                    },

                    allDateSynchro:function(){
                        var url = "/funddatas/allDataSynchro";
                        vue.getSynchro(url);
                    },
                    allDateSynchros:function(){
                        var url = "/funddatas/allDataSynchroAll";
                        vue.getSynchro(url);
                    },

                    addMain:function () {
                        if(""==vue.addFund.code) {
                            alert("基金代码不允许为空!");
                            return;
                        }else{
                            var url = "/fundmains/add";
                            axios.post(url,vue.addFund).then(function(response) {
                                var result = response.data;
                                if(result.code==0){
                                    alert(result.msg);
                                    $("#addFundMain").modal('hide');
                                    vue.addFund = {code:'',commissionRate:''};
                                    vue.ChangePageSize();
                                }
                            });
                        }
                    },
                }
            });
        });
    </script>

</div>
